<template>
    <el-card>
        <el-table border :data="skuList" v-loading="loading">
            <el-table-column
            v-for="(col,index) in columns"
            :key="index"
            v-bind="col"
            >
            <template v-if="columns.slot" v-slot="{row}">
                <slot :name="col.slot" :row="row"></slot>
            </template>
            </el-table-column>
            
        </el-table>
        <el-pagination 
        v-model:current-page="currentPage" 
        v-model:page-size="pageSize" :total="total"
        :page-sizes="[10, 20, 30, 40]" 
        layout="prev, pager, next, jumper, ->, sizes, total" 
        @current-change="getDataList" 
        @size-change="getDataList"
        >
        </el-pagination>
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'Table'
}
</script>

<script setup lang="ts">

import { ref, onMounted } from 'vue'


const props = withDefaults(
    defineProps<{
        getData:(currentPage:number,pageSize:number)=>number
        pagination?:boolean;
        columns:any
    }>(),
    {
        pagination:true
    }
)


const currentPage = ref<number>(1);
const loading = ref(false)
const pageSize = ref<number>(8);
const total = ref<number>(0);
const skuList = ref([])



//发请求获取数据

const getDataList = async()=>{
    loading.value = true
    const res = await props.getData(currentPage.value,pageSize.value)
        skuList.value = res.records
        total.value = res.total
    loading.value = false
}



// const handlecurrentchange = async(val:number)=>{
//     currentPage.value = val
//     getSkuData()
// }

// const handleSizeChange = (val:number)=>{
//     currentPage.value = 1
//     pageSize.value = val
//     getSkuData()
// }
onMounted(getDataList)
</script>

<style scoped>
.sku-Img {
    width: 60px;
    height: 60px;
}
</style>